<template>
	<view>
		<view class="titleLine"></view>
		<view class="title">
			广场
		</view>
		<view class="search" @click="goSearch()">
			<image src="https://img01-xusong.91q.com/B9725E16-AD55-450A-B611-2EAABCDBDF71.png" class="searchIcon"></image>
		</view>
		<view class="notice">
			<uni-notice-bar show-icon scrollable :text="rollText"/>
		</view>
		<view class="TabsPosition">
			<u-tabs :list="list1" lineWidth="30" lineColor="#BD3124"
				itemStyle="padding-left:30rpx;padding-right:-60rpx;width:284rpx; height:80rpx; " @click="click"
				:activeStyle="{
					color: '#101010 100%',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					
				}" :inactiveStyle="{
					color: '#9B9B9B 100%',
					transform: 'scale(1)'
				}"></u-tabs>
		</view>
		<movable-swiper v-show="isTabs.name==0" :dataList="lastDataList" :height="movHeight"  class="body" >
			<template v-slot="{movSlotData}" >
				<!-- 这里面放你自己的要显示的东西，图片什么的，下面这是示例 -->
			   <view v-if="movSlotData"  @click="goAct(movSlotData)">
					<!-- <text>{{movSlotData.name}}</text>:<text>{{movSlotData.tit}}</text> -->
					<view>
						<image :src="movSlotData.imgId" class="img" mode="aspectFill"></image>
						<view class="eventName">{{movSlotData.eventName}}</view>
						<view class="introduce">{{movSlotData.introduce}}</view>
						<view class="typeBorder">
							<image src="https://img01-xusong.91q.com/278ECAFD-4607-4BB9-AF3E-06AAB70EEE11.png" class="typeIcon"></image>
							<view class="typeText">{{movSlotData.type}}</view>
						</view>
				
					</view>
				</view>
			</template>
		</movable-swiper>
		
		<movable-swiper v-show="isTabs.name==1" :dataList="lastDataList2" :height="movHeight"  class="body" >
			<template v-slot="{movSlotData}" >
				<!-- 这里面放你自己的要显示的东西，图片什么的，下面这是示例 -->
			   <view v-if="movSlotData"  @click="goAssocation(movSlotData)">
					<!-- <text>{{movSlotData.name}}</text>:<text>{{movSlotData.tit}}</text> -->
					<view>
						<image :src="movSlotData.imgId" class="img" mode="aspectFill"></image>
						<view class="eventName">{{movSlotData.name}}</view>
						<view class="introduce">{{movSlotData.introduce}}</view>
						<view class="typeBorder">
							<image src="https://img01-xusong.91q.com/278ECAFD-4607-4BB9-AF3E-06AAB70EEE11.png" class="typeIcon"></image>
							<view class="typeText">{{movSlotData.type}}</view>
						</view>
					</view>
				</view>
			</template>
		</movable-swiper>
	</view>
</template>

<script>
	import movableSwiper from '@/components/movable-swiper/movable-swiper.vue'
	export default {
		components:{
			movableSwiper,
		},
		onLoad() {
			this.loading()
		},
		data() {
			return {
				list1: [{
						name: '活动 ACTIVITY',
					},
					{
						name: '社团 ASSOCIATION',
					},
				],
				movHeight: '880rpx',//卡片高度
				//传入的数据示例
				lastDataList:[],
				lastDataList2:[],
				imgUrl:'https://www.codingyt.com/getImage/',
				isTabs: {
					name: '',
				},
				searchContent:'',
				rollText:'欢迎来到活动广场',
				anncounceData:[],
				timeer:null,
			}
		},
		methods:{
			loading() {
				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 1500,
				})
			},
			goSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
			input(e){
				//这里可以进行实时的发送数据
				uni.request({
					url:'https://www.codingyt.com/club/event/select',
					data:{
						event_name:e
					},
					success(res) {
					
					}
				})
			},
			search(e){
				
			},
			goAct(e){
				uni.navigateTo({
					url: './act?content='+JSON.stringify(e),
				})
			},
			goAssocation(e){
				uni.navigateTo({
					url: './association?msg='+JSON.stringify(e),
				})
			},
			getList() {
				let that=this;
				uni.request({
					url: "https://www.codingyt.com/club/event/listV2",
					method: 'get',
					data:{
						"current":0,
						"size":99,
					},
					dataType: 'json',
					success: (res) => {
						that.lastDataList = res.data.data;
						console.log('广场数据是');
						console.log(that.lastDataList);
					},
				});
			},
			getList2() {
				let that=this;
				uni.request({
					url: "https://www.codingyt.com/club/organization/listV2",
					method: 'get',
					data:{
						"current":0,
						"size":99,
					},
					dataType: 'json',
					success: (res) => {
						console.log(that.lastDataList2);
						that.lastDataList2 = res.data.data;
					},
				});
			},
			click(item) {
				
				this.isTabs.name = item.index;
			},
			getAnnounceMent(){
				let that=this
				uni.request({
					url:'https://www.codingyt.com/club/organization/list',
					data:{
						current:0,
						size:99
					},
					success(res) {
						
						that.anncounceData=res.data.data
						
						
					},
				})
			},
			showOurAnnounceMent(){
				var data=this.anncounceData
				var tmp=Math.floor(Math.random()*(data.size))
				
			},
		},
		created() {
			this.getList(),
			this.getList2()
			this.getAnnounceMent()
			//this.showOurAnnounceMent()
			
		},
		onShow() {
			let that=this
			//定时器就是将我们的要进行的任务书写到我们的
			this.timeer=setInterval(function(){
				var data=that.anncounceData
				var tmp=Math.floor(Math.random()*(data.length))
				that.rollText=data[tmp].announcement
				//console.log(tmp);
				//console.log(data);
			},3000);
		},
		onHide() {//离开页面前清除计时器
			// console.log('onHide');
			clearInterval(this.timeer);
			this.timer = null;
		},
	}
</script>

<style>
	.title{
		left: 66rpx;
		top: 120rpx;
		width: 96rpx;
		height: 68rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 48rpx;
		text-align: left;
		position: absolute;
		font-weight: 600;
	}
	.titleLine{
		width: 10rpx;
		height: 36rpx;
		border-radius: 50rpx;
		background-color: rgba(245, 166, 35, 100);
		float: left;
		position: absolute;
		top: 134rpx;
		left: 36rpx;
	}
	.search{
		left: -20rpx;
		top: 228rpx;
		width: 786rpx;
		height: 68rpx;
		background-color: #f8f8f8;
		/* width: 750rpx;
		
		line-height: 40rpx;
		background-color: rgba(250, 250, 250, 100);
		text-align: center;
		box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.24);
		border: 2rpx solid rgba(255, 0, 0, 0); */
		position: absolute;
	}
	.searchIcon{
		left: 378rpx;
		top: 14rpx;
		width: 38rpx;
		height: 38rpx;
		position: absolute;
	}
	.notice{
		left: 0rpx;
		top: 294rpx;
		width: 750rpx;
		height: 76rpx;
		line-height: 40rpx;
		/* opacity: 0.7; */
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		font-family: Arial;
		position: absolute;
	}
	.TabsPosition{
		position: absolute;
		top: 400rpx;
		left: 20rpx;
	}
	.body{
		position: absolute;
		left: 130rpx;
		top: 570rpx; 
	}
	.img{
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		width: 444rpx;
		height: 598rpx;
		
	}
	.eventName{
		position: relative;
		top: 16rpx;
		left: 34rpx;
		width: 386rpx;
		height: 54rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;/*溢出显示省略号*/
		white-space:nowarp;/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;  
	}
	.introduce{
		position: relative;
		left: 34rpx;
		top: 20rpx;
		width: 382rpx;
		height: 100rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 24rpx;
		text-align: left;
		  ;
		overflow: hidden;
		text-overflow: ellipsis;/*溢出显示省略号*/
		white-space:nowarp;/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;  
	}
	.typeBorder{
		left: 14rpx;
		top: 32rpx;
		width: 188rpx;
		height: 62rpx;
		border-radius: 36rpx;
		background-color: rgba(243, 253, 252, 100);
		position: relative;
	}
	.typeIcon{
		left: 14rpx;
		top: 14rpx;
		width: 32rpx;
		height: 32rpx;
		position: relative;
	}
	.typeText{
		left: 46rpx;
		top: -30rpx;
		width: 124rpx;
		height: 40rpx;
		color: rgba(79, 79, 79, 100);
		font-size: 24rpx;
		text-align: center;
		  ;
		position: relative;
	}
	.peopleBorder{
		left: 232rpx;
		top: -30rpx;
		width: 188rpx;
		height: 62rpx;
		line-height: 40rpx;
		border-radius: 36rpx;
		background-color: rgba(243, 253, 252, 100);
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		font-family: Arial;
		position: relative;
	}
	.peopleIcon{
		left: -54rpx;
		top: 16rpx;
		width: 30rpx;
		height: 32rpx;
		position: relative;
	}
	.peopleText{
		left: 60rpx;
		top: -32rpx;
		width: 104rpx;
		height: 40rpx;
		color: rgba(79, 79, 79, 100);
		font-size: 24rpx;
		text-align: center;
		  ;
		position: relative;
	}
</style>
